---
permalink: "/ui/ui-elements/text/nested/index.xml"
tags: "UI/UI Elements/Text"
hv_title: "Nested"
hv_button_behavior: "back"
---
{% extends 'templates/base.xml.njk' %}

{% block styles %}
  <style id="text" fontSize="24" margin="24"/>
  <style id="bold" fontWeight="bold"/>
  <style id="italic" fontStyle="italic"/>
  <style id="color" backgroundColor="#63CB76" color="white"/>
  <style id="big" fontSize="32"/>
  <style id="small" fontSize="16"/>
  <style id="link" color="blue">
    <modifier pressed="true">
    <style color="red"/>
    </modifier>
  </style>
{% endblock %}

{% block container %}
  <text style="text">
    Hello,
    <text style="bold">
      World of
      <text style="color">HyperView!</text>
    </text>
  </text>
  <text style="Text">
    <text style="color"></text>
    <text style="big">
      Hello,
    </text>
    <text style="bold">
      World
    </text>
    <text style="small">
      of
    </text>
    <text style="color">
      HyperView!
    </text>
  </text>
  <text style="Text small">
    Tap
    <text style="link" action="back">here</text>
    to go back
  </text>
  <text style="Text small">
    Velit voluptas et alias atque provident sapiente consequuntur deserunt.
    <text style="link" action="back">
      Dolorem et non error dolorem voluptate amet accusantium.
    </text>
    Corporis rerum sed labore quae sed qui quis quasi.
  </text>
{% endblock %}
